<template>
  <div>
    <h2>模板变量Demo</h2>
    <editor-content :editor="editor" />

    <div class="buttons">
      <button @click="testBasic">基础测试</button>
      <button @click="testTwoFormats">测试两种格式</button>
      <button @click="testConvert">转换测试</button>
      <button @click="clearAll">清空</button>
    </div>

    <div v-if="status" class="status">{{ status }}</div>
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { TemplateVariable, convertTemplateVariables } from './TemplateVariableNode.ts'

export default {
  name: 'TemplateVariableDemo',
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
      status: '',
    }
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        Document,
        Paragraph,
        Text,
        TemplateVariable,
      ],
      content: '点击按钮开始测试两种变量格式的功能',
    })
  },

  methods: {
    testBasic() {
      this.editor.commands.setContent('这是基础测试内容')
      this.status = '基础测试完成'
    },

    testTwoFormats() {
      const content = '用户名: {{请输入用户名}} 当前用户: ${{张三}} 年龄: ${{25}} 地址: {{请输入地址}}'
      this.editor.commands.setContent(content)

      setTimeout(() => {
        convertTemplateVariables(this.editor)
        this.status = '转换完成：{{}} 是占位符，${{}} 是实际值'
      }, 100)
    },

    testConvert() {
      const text = '姓名：{{姓名}} 电话：{{电话}} 实际姓名：${{李四}} 实际电话：${{13800138000}}'
      this.editor.commands.setContent(text)

      setTimeout(() => {
        convertTemplateVariables(this.editor)
        this.status = '已转换，注意两种变量的显示差异'
      }, 100)
    },

    clearAll() {
      this.editor.commands.clearContent()
      this.status = '内容已清空'
    },
  },

  beforeUnmount() {
    if (this.editor) {
      this.editor.destroy()
    }
  },
}
</script>

<style scoped>
.buttons {
  margin: 20px 0;
}

.buttons button {
  margin-right: 10px;
  padding: 10px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.buttons button:hover {
  background: #0056b3;
}

.status {
  margin-top: 15px;
  padding: 10px;
  background: #f0f8ff;
  border: 1px solid #007bff;
  border-radius: 5px;
  color: #007bff;
}
</style>
